<template>
  <div id="push">
    <el-table
      :data="tableData"
      style="width: 100%; margin-bottom: 20px"
      row-key="id"
      border
      default-expand-all
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column prop="id" label="主键" sortable width="180">
      </el-table-column>
      <el-table-column prop="label" label="分类名称" sortable wi2dth="180">
      </el-table-column>
      <el-table-column>
        <template slot-scope="scope">
          <el-button type="success" @click="dialogFormVisible = true"
            >添加</el-button
          >
          <el-button type="danger" @click="deleteCate(scope.row.id)"
            >删除</el-button
          >
          <el-button type="primary" @click="uptCate(scope.row)"
            >编辑</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!--添加（树）-->
    <el-dialog title="商品分类添加" :visible.sync="dialogFormVisible">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="商品分类名称" prop="cateName">
          <el-input v-model="ruleForm.cateName"></el-input>
        </el-form-item>
        <el-form-item label="父级ID" prop="parentId">
          <el-input v-model="ruleForm.parentId"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')"
            >立即创建</el-button
          >
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!--编辑（树）-->
    <el-dialog title="商品分类编辑" :visible.sync="dialogFormVisible11">
      <el-form
        :model="ruleForm1"
        :rules="rules"
        ref="ruleForm1"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="商品分类名称" prop="cateName">
          <el-input v-model="ruleForm1.cateName"></el-input>
        </el-form-item>
        <el-form-item label="父级ID" prop="parentId">
          <el-input v-model="ruleForm1.parentId"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="preservation('ruleForm1')"
            >保存</el-button
          >
          <el-button @click="resetForm('ruleForm1')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      ruleForm: {
        cateName: "",
        parentId:"",
        
      },
      ruleForm1: {
        cateId: "",
        cateName: "",
        parentId:"",
      },
      dialogFormVisible: false,
      dialogFormVisible11: false,
      rules: {
        cateName: [
          { required: true, message: "请输入商品分类名称", trigger: "blur" },
        ],
      },
    };
  },
  created: function () {
    this.axios
      .get("http://localhost:35043/api/ProductCategory/ProductCategoryTree")
      .then((res) => {
        console.log(res);
        this.tableData = res.data;
      });
  },
  methods: {
    show() {
      this.axios
        .get("http://localhost:35043/api/ProductCategory/ProductCategoryTree")
        .then((res) => {
          console.log(res);
          this.tableData = res.data;
        });
    },
    //删除
    deleteCate(a) {
      if (!confirm("确认删除吗？")) {
        return;
      }
      console.log(a);
      this.axios
        .delete(
          "http://localhost:35043/api/ProductCategory/DelProductCate?id=" + a
        )
        .then((res) => {
          if (res.data.code == 0) {
            alert("删除成功");
            this.show();
          } else {
            alert("删除失败");
            return;
          }
        });
    },
    //添加商品分类
    submitForm(ruleForm) {
      this.$refs[ruleForm].validate((valid) => {
        if (valid) {
          this.axios({
            url: "http://localhost:35043/api/ProductCategory/AddProductCate",
            method: "post",
            data: this.ruleForm,
          }).then((res) => {
            if (res.data.code == 0) {
              alert("添加成功");
              this.show();
            } else {
              alert("添加失败");
              return;
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //反填
    uptCate(b) {
      this.dialogFormVisible11 = true;

      this.ruleForm1.cateId=b.id;
      this.ruleForm1.cateName = b.label;
      this.ruleForm1.parentId=b.parId;
      
      console.log(cateId);
      console.log(cateName);
      console.log(parentId);
    },
    //修改商品分类
    preservation(ruleForm1) {
      this.$refs[ruleForm1].validate((valid) => {
        if (valid) {
          this.axios({
            url: "http://localhost:35043/api/ProductCategory/UptProductCate",
            method: "post",
            data: this.ruleForm1,
          }).then((res) => {
            if (res.data.code == 0) {
              alert("修改成功");
              this.show();
            } else {
              alert("修改失败");
              return;
            }
          });
        }
      });
    },
  },
};
</script>
      